<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

	<head>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title> - 时间轴</title>

		<meta name="keywords" content="">
		<meta name="description" content="">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/qs.js"></script>
		<link rel="shortcut icon" href="favicon.ico">
		<link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
		<link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
		<link href="css/animate.css" rel="stylesheet">
		<link href="css/style.css?v=4.1.0" rel="stylesheet">

	</head>

	<body class="gray-bg">
		<div class="row">
			<div class="col-sm-12">
				<div class="wrapper wrapper-content">
					<div class="row animated fadeInRight">
						<div class="col-sm-12">
							<div class="ibox float-e-margins">
								<div class="text-center float-e-margins p-md">
									<h2 v-show="tableData1 == 0">当前客户没有流水</h2>
									<div v-show="tableData1 > 0"  class="widget-inline-box ng-scope" style="float: left; padding-right: 40px;">
										<a href="javascript:void(0);" @click="query(null,timeCount[0].cus_id)" ng-click="tmsel(da.dt);">
											<h5><i class="md md-nfc"></i> <b class="ng-binding">{{tableData1}}</b></h5>
											<p class="text-gray ng-binding" set-lan="html:全部">全部</p>
										</a>
									</div>
									
										<div v-for="(count,i) in timeCount" class="widget-inline-box ng-scope" style="float: left; padding-right: 40px;">
											<a href="javascript:void(0);" @click="query(count.log_type,count.cus_id)" ng-click="tmsel(da.dt);">
												<h5><i class="md md-nfc"></i> <b class="ng-binding">{{count.count}}</b></h5>
												<p class="text-gray ng-binding" set-lan="html:全部">{{count.dicName}}</p>
											</a>
										</div>
									
								</div>
								<div class="" id="ibox-content">

									<div v-for="(item,i) in tableData" id="vertical-timeline" class="vertical-container light-timeline">

										<div class="vertical-timeline-block">
											<div class="vertical-timeline-icon navy-bg">
												<i class="fa fa-briefcase"></i>
											</div>

											<div class="vertical-timeline-content">
												<h2>{{item.dicName}}</h2>
												<p>{{item.log_message}}
												</p>
												<a href="${item.log_title}" class="btn btn-sm btn-primary"> 更多信息</a>
												<span class="vertical-date">
                                    				 {{dateFormat(item.log_date,1)}}   	 <br>
                                       			 <small>
                                       			 	 {{dateFormat(item.log_date,2)}} 
                                       			 </small>
                                 			  	 </span>
											</div>
										</div>

									</div>

								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>

		<script>
			var vm = new Vue({
				el: ".row",
				data: {
					tableData: [],
					timeCount:[],
					tableData1:''
				},
				methods: {
					//   时间格式化
					dateFormat: function(time, i) {
						var date = new Date(time);
						var year = date.getFullYear();
						/* 在日期格式中，月份是从0开始的，因此要加0
						 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
						 * */
						var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
						var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
						var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
						var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
						var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
						// 拼接
						if(i == 1) {
							return year + "-" + month + "-" + day;
						} else if(i == 2) {
							return hours + ":" + minutes + ":" + seconds;
						}

					},
					query(type,cusid){
					var iosnn = this;
						//post提交数据
						axios.post("queryTime",
							//参数转换
							Qs.stringify({
								'custid': cusid,
								'type':type
							}, {
								arrayFormat: 'brackets'
							})
						).then(function(v) {
							iosnn.tableData = v.data;
						}).catch(function(e) {
							alert("出错了" + e);
						});
					}
				},
				mounted() {
					this.tableData = ${time}
					this.tableData1 = this.tableData.length;
					this.timeCount = ${timeCount};

				}
			});
		</script>
		<!-- 全局js -->
		<script src="js/jquery.min.js?v=2.1.4"></script>
		<script src="js/bootstrap.min.js?v=3.3.6"></script>

		<!-- 自定义js -->
		<script src="js/content.js?v=1.0.0"></script>

		<script>
			$(document).ready(function() {

				// Local script for demo purpose only
				$('#lightVersion').click(function(event) {
					event.preventDefault()
					$('#ibox-content').removeClass('ibox-content');
					$('#vertical-timeline').removeClass('dark-timeline');
					$('#vertical-timeline').addClass('light-timeline');
				});

				$('#darkVersion').click(function(event) {
					event.preventDefault()
					$('#ibox-content').addClass('ibox-content');
					$('#vertical-timeline').removeClass('light-timeline');
					$('#vertical-timeline').addClass('dark-timeline');
				});

				$('#leftVersion').click(function(event) {
					event.preventDefault()
					$('#vertical-timeline').toggleClass('center-orientation');
				});

			});
		</script>

	</body>

</html>